<template>
  <div class="menus" v-loading="loading" style="background:white;  border-radius: 5px;
">
    <div class="search d-flex">
      <div class="d-center">
        <el-button size="medium" type="primary"  @click="add()">新增</el-button>
      </div>
    </div>
    <el-tree :data="data" node-key="id"  :expand-on-click-node="false" :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button size="mini" type="primary" plain @click="edit(data)">编辑</el-button>
          <el-button size="mini" type="danger" plain @click="del(data)">删除</el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog title="菜单详情" :visible.sync="dialogFormVisible" @close="close" width="80%" top="10">
      <el-form :model="form">
        <el-form-item prop="parent_id" label="父级菜单" :label-width="'100px'">
          <el-select v-model="mineStatus" ref="sel" placeholder="请选择" style="width:300px">
            <el-option :value="mineStatusValue" class="trees">
              <el-tree
                :data="data"
                default-expand-all
                highlight-current
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="菜单名称" :label-width="'100px'">
          <el-input size="medium" v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible=false">取 消</el-button>
        <el-button
          size="medium"
          type="primary"
          :disabled="buttonShow?true:false"
          @click="actions()"
        >保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "menus",
  data() {
    return {
      loading: true,
      dialogFormVisible: false,
      form: {},
      data: [],
      parentlist: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      buttonShow: false,
      mineStatus: {},
      mineStatusValue: ""
    };
  },
  mounted: function() {
    this.getdata();
  },
  methods: {
    handleNodeClick(val) {
      this.mineStatusValue = val.name;
      this.mineStatus = val;
      this.$refs.sel.blur();
    },
    setForm() {
      this.form = {
        name: "",
        parent_id: ""
      };
    },
    getdata() {
      let that = this;
      let params = this.searchs;
      console.log(params);
      this.$get("/api/menu/index", { params: params }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.data = res.data.list;
          this.parentlist = res.data.parentlist;
          this.parentlist.unshift({ id: 0, name: "请选择父级菜单" });
        }
        setTimeout(function() {
          that.loading = false;
        }, 300);
      });
    },
    close() {
      //   this.dialogFormVisible = false;
    },
    add() {
      this.mineStatusValue = "";
      this.mineStatus = {};
      this.setForm();
      this.dialogFormVisible = true;
    },
    edit(item) {
      this.form = item;
      this.dialogFormVisible = true;
      if (item.parent_id) {
        this.parentlist.forEach(v => {
          if (v.id == item.parent_id) {
            this.mineStatusValue = v.name;
            this.mineStatus = v;
          }
        });
      }
    },
    del(data) {
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);
      // let sdf = this.$refs.permissionTree.getCheckedKeys();
      // console.log(sdf);
      // console.log(data);

      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post("/api/menu/deletes", {
            id: data.id
          }).then(res => {
            if (res.code == 200) this.getdata();

            this.$message({
              title: "操作提示",
              message: res.msg,
              type: res.state
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    actions() {
      let that = this;
      let button = "添加菜单操作";
      this.buttonShow = true;
      if (this.form.id) {
        button = "编辑菜单操作";
      }
      if (this.mineStatus.id) {
        this.form.parent_id = this.mineStatus.id;
      }
      this.$post("/api/menu/actions", this.form).then(res => {
        this.$message({
          title: button,
          message: res.msg,
          type: res.state
        });
        if (res.code == 200) {
          this.getdata();
          that.dialogFormVisible = false;
        }
        setTimeout(function() {
          that.buttonShow = false;
        }, 300);
      });
    }
  }
};
</script>
<style lang="less">
.m-table {
  width: 100%;
  .cell {
    height: 50px;
    line-height: 50px;
    color: #909399;
    font-family: "Microsoft YaHei";
    outline: none;
    font-size: 14px;
    border-top: 1px solid rgba(232, 237, 238, 1);
    text-align: left;
  }
  th:first-child .cell {
    padding-left: 37px;
  }
  th:last-child .cell {
    text-align: right;
    margin-right: 10px;
  }
}
.el-tree {
  border-top: 1px solid rgba(232, 237, 238, 1);
}
.el-tree-node__content {
  height: 50px;
  border-bottom: 1px solid rgba(232, 237, 238, 1);
}

.el-tree-node__content > .el-tree-node__expand-icon {
  border: 1px #ddd solid;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 10px;
  padding: 4px;
}
.el-tree-node__expand-icon.is-leaf {
  border: 0;
}
.el-select-dropdown__list {
  padding: 0;
}
.trees {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: none;
  }
  .el-tree-node__content > .el-tree-node__expand-icon {
    border: 0;
  }
  .el-tree-node__content {
    height: 40px;
    border-bottom: 1px solid #eef4f5;
  }
  height: auto;
  padding: 0;
}
</style>
<style lang="less" scoped>
.menus {
  width: 100%;
  height: calc(100% - 40px);
  .search {
    width: 100%;
    height: 60px;
    padding: 10px 5px;
    position: relative;
    .input {
      width: 300px;
      margin-left: 10px;
      span {
        flex-shrink: 0;
      }
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .main {
    //   width: 100%;
    height: calc(100% - 60px);
    // overflow-y: scroll;
    // position: absolute
    border: 1px solid #ebeef5;
  }
}
</style>